<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>手写节流函数</title>
  </head>
  <body>
    <button id="btn">时间戳函数节流</button>
    <br />
    <button id="btn1">定时器函数节流</button>
    <script>
      // 函数节流：指高频事件在一段时间内，无论事件触发的有多么频繁，目标函数只执行其中一次

      // 时间戳节流
      function timestampThrottle(func, wait = 500) {
        // 记录上次执行的时间
        let lastTime = 0;
        return function () {
          const nowTime = Date.now();
          const args = Array.prototype.slice.call(arguments);
          if (nowTime - lastTime > wait) {
            lastTime = nowTime;
            func.apply(this, args);
          }
        };
      }

      // 定时器节流
      function setTimeOutThrottle(func, wait = 500) {
        let timer = null;
        return function (...args) {
          if (timer) return;
          timer = setTimeout(() => {
            func.apply(this, args);
            timer = null;
          }, wait);
        };
      }
      const btn = document.querySelector('#btn');
      const btn1 = document.querySelector('#btn1');

      function logData() {
        console.log(111, this);
      }
      /*  // 这种方式是节流函数是不会生效的,因为节流函数返回的是一个新函数，但是没有被调用
      btn.addEventListener('click', function () {
        timestampThrottle(logData, 1000);
      }); */
      btn.addEventListener('click', timestampThrottle(logData, 2000));
      btn1.addEventListener('click', setTimeOutThrottle(logData, 1000));
    </script>
  </body>
</html>
